<template>
    <div class="discount-outer">

        <!-- 贴顶导航 -->
        <UserFixedHead title="Discount" />

        <!-- 初始化 -->
        <UxIniting v-if="!inited" />

        <template v-else>

            <h2>Discount</h2>
            <h3>Loyalty program</h3>
            <UserDiscountProgress :data.sync="progressData" />

            <h3>Coupons and bulk discounts</h3>
            <div class="discount">
                <div class="discount-list" v-show="discount && discount.length > 0">
                    <!-- <h2>
                        You can use the following discounts in sample orders
                        <i class="iconfont icon-xiangqing2"></i>
                    </h2> -->

                    <h4>My coupons({{ sortDiscount.length }})</h4>
                    <ul>
                        <li v-for="item in sortDiscount" :key="item.id" :level="getLevel(item)" @click="product = true" :class="{bulk:item.bulk}">
                            <strong v-text=" 100 - item.discount_value + '%'"></strong>
                            <p>
                                <em v-text="getCouponRangeText(item)"></em>
                                <b v-text="'Expires ' + $timeFormat(item.expiration_at)"></b>
                            </p>
                            <!-- <button>New sample order</button> -->
                            <figure v-if="item.countdown">
                                <img src="https://img.podpartner.com/static/images-20230202/discount-overtime.png" alt="">
                            </figure>
                        </li>
                    </ul>
                </div>
                <div class="discount-empty" v-show="!loading && discount.length == 0">
                    <figure>
                        <img src="https://img.podpartner.com/static/images-20230202/discount-empty.png" />
                    </figure>
                    <p>No coupons available at this time.</p>
                </div>

                <div class="discount-contact" v-show="!loading">

                    <figure>
                        <img src="@/assets/images/dashboard/discount-message.png" alt="" />
                    </figure>

                    <div class="discount-contact-info">
                        <h3>Want to enjoy a bulk order discount?</h3>
                        <span style="flex:1;"></span>
                        <p>Contact us at</p>
                        <span><em>service@podpartner.com</em> get a deal.</span>
                        <fieldset>
                            <button @click="openWindow('https://m.me/PodPartnerCo')">
                                <img src="https://img.podpartner.com/static/images-20230202/messenger.png" alt="" />
                                <a>Messenger</a>
                            </button>
                            <button @click="gotoWhatsapp()">
                                <img src="https://img.podpartner.com/static/images-20230202/whatsapp-active.png" alt="" />
                                <a>Whatsapp</a>
                            </button>
                        </fieldset>

                    </div>

                </div>
            </div>

        </template>

        <!-- 下单选择订单类型 -->
        <OrderProductSelect v-model="product" @selectDesign="insertDesign($event)" />
    </div>
</template>
<script>
export default {
    name: "UserBillingDiscount",
    layout: "layout-user",
    data () {
        return {
            inited: false,
            loading: true,
            discount: [],
            product: null,
            dashData: {},
        };
    },
    computed: {
        progressData () {
            let data = this.dashData || {};
            let obj = {
                one_month_ago_sale: data.one_month_ago_sale || 0,
                two_month_ago_sale: data.two_month_ago_sale || 0,
                cur_month_ago_sale: data.cur_month_ago_sale || 0,
                total: data.total || 0,
                level: parseInt(data.level) || 0,
                show_label: JSON.parse(data.show_label || "[]")
            };
            return obj;
        },
        sortDiscount () {
            let bulks = [];
            let commons = [];
            let list = this.discount;
            list.map(item => {
                item.bulk ? bulks.push(item) : commons.push(item)
            });
            commons.sort((a, b) => { return a.discount_value - b.discount_value })
            bulks.sort((a, b) => { return a.discount_value - b.discount_value })
            return [...commons, ...bulks]
        }
    },
    methods: {
        // 获取优惠券使用范围展示文案
        getCouponRangeText (data) {
            if (!data.bulk) {
                return 'Sample order (≤ 3 items)';
            } else if (data.min_count == 0) {
                return `Bulk order (≤ ${data.max_count} items)`
            } else if (data.max_count == 0) {
                return `Bulk order (≥ ${data.min_count} items)`
            } else {
                return `Bulk order (${data.min_count} - ${data.max_count} items)`
            }
        },
        formatReq () {
            let list = this.discount || [];
            let date = parseInt(new Date().getTime() / 1000);
            // 处理一下参数
            list.map(item => {
                //是否为批量折扣券
                if (item.max_count != 0 && item.max_count != 3 || item.min_count != 0) {
                    item.bulk = true
                } else {
                    item.bulk = false
                }
                //24h图标是否显示
                if (item.expiration_at - date <= 86400) {
                    item.countdown = true
                } else {
                    item.countdown = false
                }
            })
        },
        // 获取优惠信息
        async getCoupon () {
            // 优惠券
            this.loading = true;
            let response = await this.$http("Discount.getDiscount");
            this.discount = response.data || [];
            this.formatReq();
            this.loading = false;
        },
        async getUsetData () {
            this.loading = true;
            let res = await this.$http("User.dashBoard");
            if (res.code == 0) {
                this.dashData = res.data;
            }
            this.loading = false;
        },
        getLevel (item) {
            return parseInt(item.discount_value / 10);
        },
        insertDesign (products) {
            this.$store.dispatch("order/init", {
                shop_id: 0,
                product: products
            });
            this.$router.push("/order/product");
        },
        openWindow (url) {
            window.open(url, "_blank");
        },
        gotoWhatsapp () {
            this.$gmeRepore('whatsapp').then(e => {
                let path = "http://wa.me/message/4V7UTTIJDLJFD1"
                window.open(path, "_blank");
            })
        }
    },
    created () {
        Promise.all([this.getCoupon(), this.getUsetData()]).then(() => this.inited = true);
    },
};
</script>
<style lang="scss" scoped>
.discount-outer {
    display: flex;
    flex-direction: column;
    & > .initing {
        flex: 1;
        width: 100%;
    }

    & > h2 {
        display: flex;
        align-items: center;
        font-size: 36px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 40px;

        i {
            margin: 0 8px;
            font-size: 16px;
            color: #555;
            font-weight: normal;
        }

        a {
            cursor: default;
            color: #555;
            &:hover {
                color: #ea4c89;
            }
        }

        a:first-child {
            cursor: pointer;
        }
        a:last-child {
            color: #000;
        }
    }
    & > h3 {
        font-size: 18px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 20px;
        margin-top: 40px;
        margin-bottom: 18px;
    }
}
.discount {
    display: flex;
    flex-direction: row;
    height: 288px;
    position: relative;
    overflow: hidden;
}

.discount-list {
    min-width: 360px;
    width: 360px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e6e6e6;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;

    & > h4 {
        font-size: 14px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 16px;
        padding: 18px 24px 0;
        height: 40px;
        box-sizing: border-box;
    }

    ul {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 18px 24px 0;
        box-sizing: border-box;
    }
    li {
        height: 52px;
        background: #d5b793;
        position: relative;
        margin-bottom: 14px;
        border-radius: 4px;
        display: flex;
        cursor: pointer;
        transition: all 0.2s;
        &::before {
            content: '';
            position: absolute;
            left: -25px;
            top: 50%;
            width: 30px;
            height: 30px;
            transform: translateY(-50%);
            background-color: #fff;
            border-radius: 30px;
        }
        &::after {
            content: '';
            position: absolute;
            right: -25px;
            top: 50%;
            width: 30px;
            height: 30px;
            transform: translateY(-50%);
            background-color: #fff;
            border-radius: 30px;
        }

        &:hover {
            background-color: #c0a98c;
        }

        & > strong {
            width: 106px;
            font-size: 24px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #ffffff;
            line-height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-right: 1px dashed rgba($color: #a88b6a, $alpha: 0.6);
            &::after {
                content: 'off';
                font-size: 12px;
                font-family: Roboto-Regular, Roboto;
                font-weight: 400;
                color: rgba($color: #ffffff, $alpha: 0.5);
                line-height: 28px;
                height: 20px;
                margin-left: 4px;
            }
        }

        & > p {
            display: flex;
            flex: 1;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            em {
                font-size: 12px;
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;
                color: #feedba;
                line-height: 18px;
            }
            b {
                font-size: 12px;
                font-family: Roboto-Regular, Roboto;
                font-weight: 400;
                color: #f8f5ea;
                line-height: 18px;
            }
        }

        &.bulk {
            background: #58b89d;
            &:hover {
                background-color: #68a691;
            }
        }
    }
}

.discount-empty {
    min-width: 360px;
    width: 360px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e6e6e6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    figure {
        width: 146px;
        height: 26px;
        img {
            width: 100%;
            height: 100%;
        }
    }

    p {
        margin-top: 14px;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #757575;
        line-height: 20px;
    }
}

.discount-contact {
    flex: 704;
    margin-left: 16px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e6e6e6;
    padding: 50px 64px;
    display: flex;
    box-sizing: border-box;
    overflow: hidden;

    & > figure {
        flex: 220;
        display: flex;
        justify-content: center;
        img {
            height: 188px;
        }
    }

    .discount-contact-info {
        margin-left: 20px;
        flex: 300;
        display: flex;
        flex-direction: column;
        h3 {
            height: 24px;
            font-size: 18px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #212121;
            line-height: 24px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
        }
        figure {
            width: 352px;
            height: 140px;
            margin-bottom: 12px;
            img {
                width: 100%;
                height: 100%;
            }
        }
        p {
            height: 16px;
            font-size: 16px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #212121;
            line-height: 16px;
        }
        span {
            margin-top: 12px;
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #555555;

            line-height: 16px;
            em {
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;
                color: #212121;
            }
        }

        fieldset {
            display: flex;
            margin-top: 24px;
            button {
                width: 140px;
                height: 40px;

                img {
                    width: 18px;
                    height: 18px;
                    margin-right: 4px;
                }
                & + button {
                    margin-left: 10px;
                }
            }
        }
    }
}

// .discount-list {
//     flex: 360;
//     padding: 30px 24px;
//     overflow: auto;
//     height: 100%;
//     h2 {
//         height: 22px;
//         font-size: 18px;
//         font-weight: bold;
//         color: #000000;
//         line-height: 22px;
//         margin-bottom: 24px;
//         white-space: nowrap;
//         i {
//             color: #acacac;
//             font-size: 14px;
//             line-height: 22px;
//         }
//     }

//     ul {
//         width: 100%;
//         padding-bottom: 30px;
//         position: relative;
//         align-items: flex-start;
//         display: flex;
//         flex-direction: row;
//         justify-content: space-between;
//         flex-wrap: wrap;
//         margin: 0 -4px;
//         display: none;
//     }

//     li {
//         display: flex;
//         position: relative;
//         max-width: 300px;
//         min-width: 270px;
//         width: 50%;
//         height: 60px;
//         background: #4ab899;
//         cursor: pointer;
//         // overflow: hidden;
//         // border-radius: 10px;
//         transition: all 0.5s;
//         margin: 0 4px 24px 4px;
//         &.bulk {
//             background: #cdad87;
//             &:hover {
//                 background: #b29676;
//             }
//         }
//         &:hover {
//             background: #2c997b;
//             & > button {
//                 display: flex;
//             }
//             & > span {
//                 display: none;
//             }
//         }
//         figure {
//             position: absolute;
//             top: 0;
//             right: 12px;
//             transform: translateY(-50%);
//             width: 22px;
//             height: 15px;
//             img {
//                 width: 100%;
//                 height: 100%;
//             }
//         }
//         button {
//             transition: all 0.5s;
//             display: none;
//             height: 100%;
//             flex: 1;
//             flex-direction: column;
//             justify-content: center;
//             align-items: center;
//             border: none;
//             padding: 0;
//             color: #fce49f;
//             font-size: 14px;

//             font-weight: 600;
//             color: #fce49f;
//             line-height: 20px;
//         }

//         &:before {
//             content: '';
//             position: absolute;
//             left: -10px;
//             top: 50%;
//             transform: translate(-50%, -50%);
//             width: 30px;
//             height: 30px;
//             background-color: #fff;
//             border-radius: 30px;
//             z-index: 1;
//         }

//         &:after {
//             content: '';
//             position: absolute;
//             right: -10px;
//             top: 50%;
//             transform: translate(50%, -50%);
//             width: 30px;
//             height: 30px;
//             background-color: #fff;
//             border-radius: 30px;
//         }

//         strong {
//             text-align: center;
//             position: relative;
//             box-sizing: border-box;
//             width: 100px;
//             height: 60px;
//             font-size: 28px;
//             font-weight: bold;
//             color: #ffffff;
//             line-height: 60px;

//             padding: 0 24px 0 8px;

//             border-right: 1px dashed rgba($color: #000000, $alpha: 0.3);

//             &:before {
//                 content: 'off';
//                 position: absolute;
//                 right: 8px;
//                 bottom: 18px;

//                 height: 14px;
//                 font-size: 12px;
//                 font-weight: bold;
//                 color: #fff;
//                 opacity: 0.5;
//                 line-height: 14px;
//             }
//         }

//         span {
//             flex: 1;
//             display: flex;
//             flex-direction: column;
//             justify-content: center;
//             align-items: center;
//             font-size: 14px;

//             font-weight: 600;
//             line-height: 22px;
//             em {
//                 color: #fbdc80;
//             }
//             b {
//                 font-size: 12px;
//                 color: #f8f5ea;
//                 font-weight: 600;
//             }
//         }
//     }
//     ul {
//         // li[level="1"] {
//         //   background-image: url(~https://img.podpartner.com/static/images-20230202/discount-type3.png);
//         // }
//         // li[level="2"] {
//         //   background-image: url(~https://img.podpartner.com/static/images-20230202/discount-type3.png);
//         // }
//         // li[level="3"] {
//         //   background-image: url(~https://img.podpartner.com/static/images-20230202/discount-type3.png);
//         // }
//         // li[level="4"] {
//         //   background-image: url(~https://img.podpartner.com/static/images-20230202/discount-type3.png);
//         // }
//         // li[level="5"] {
//         //   background-image: url(~https://img.podpartner.com/static/images-20230202/discount-type3.png);
//         // }
//         // li[level="6"] {
//         //   background-image: url(~https://img.podpartner.com/static/images-20230202/discount-type3.png);
//         // }
//         // li[level="7"] {
//         //   background-image: url(~https://img.podpartner.com/static/images-20230202/discount-type3.png);
//         // }
//         // li[level="8"] {
//         //   background-image: url(~https://img.podpartner.com/static/images-20230202/discount-type2.png);
//         // }
//         // li[level="9"] {
//         //   background-image: url(~https://img.podpartner.com/static/images-20230202/discount-type1.png);
//         // }
//     }
// }
</style>
